<template>
	<view>
		
		
		<view style="display: flex;
		margin: 20upx;
		align-items:center; 
			justify-content:space-around;
			align-content: center;"
			 v-for="(item, index) in list" :index="index" :key="index"  >
			
			<view style="flex: 1;
				display: flex;
				align-items:center;
				" >
				<view style="float: 1;">
					
				<view class="header" v-if="item.img">
					<image :src="item.img" mode="widthFix" class="headimg" style="width:100upx;"></image>
				</view>
				
				<view class="header" v-else>
					<image src="/static/logo.png" mode="widthFix" class="headimg" style="width:100upx;"></image>
				</view>
				
				
				</view>
				<view style="float: 1;">
					<view>
				<view style="font-size: 30upx;line-height: 20upx;">
					{{item.pname}}
				</view>
				<view style="font-size: 24upx;color: #db3542;">
					{{item.addtime}}
				</view>
				</view>
				</view>
			</view>
			
			<!-- <view style="float: 1;">
				<view >
				<button style="border-radius:50upx;border: 1px solid #c6c4c8;font-size: 24upx;background-color:#c6c4c8 ;color: #5b5b5b;" @click="cancelfollow(item.id)"> 取消关注</button>
				
				</view>
				
			</view> -->
			<view style="float: 1;padding: 30upx 0;">
				<view >
				<button style="border-radius:50upx;border: 1px solid #c6c4c8;font-size: 24upx;background-color:#c6c4c8 ;color: #5b5b5b;" @click="cancelfollow(item.id)"> 取消关注</button>
				
				</view>
				
			</view>
			
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//系统消息列表
				list:[],
				uid:uni.getStorageSync('userInfo').uid,
			}
		},
		onLoad() {
			uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
		        //监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		        //console.log('refresh');
				
				
				this.loadData();
		        setTimeout(function () {
		            uni.stopPullDownRefresh();  //停止下拉刷新动画
		        }, 1000);
		},
		methods: {
			cancelfollow(id){
				var that = this;
				const sendData = {
					"id": id,
					
				};
				
				
				
				uni.request({
					url: this.userApi+'/followpcancel', //仅为示例，并非真实接口地址。
					data: sendData,
					dataType: 'json',
					method: 'get',
					header: {
						'content-type': 'application/json' // 微信默认就是
					},
					success: res => {
						if (res.data !== '') {
							console.log(res.data );
							
							
							uni.showModal({
								title: "成功取消关注",
								content: "成功取消关注！",
								showCancel: false,
								confirmText: "确定",
								   success: function (res) {
								        if (res.confirm) {
								            console.log('用户点击确定');
											that.loadData();
											
												
								        } else if (res.cancel) {
								            console.log('用户点击取消');
								        }
								    }
							})
						} else {
							
							console.log("数据没有");
						}
					}
				});
				
			},
		
			loadData(){
				const sendData = {
					"uid": this.uid
					
				};
				
				uni.request({
					url: this.userApi+'/followp', //仅为示例，并非真实接口地址。
					data: sendData,
					dataType: 'json',
					method: 'get',
					header: {
						'content-type': 'application/json' // 微信默认就是
					},
					success: res => {
						console.log(res);
						if (res.statusCode !== 404) {
							//console.log(res.data );
							
							this.list=res.data;
						} else {
							this.list='';
							console.log("数据没有");
						}
					}
				});
			}
			
		}
	}
</script>

<style>
.header{
		flex: 0.5;
		padding-right: 10px;
	}
	.headimg{
		border-radius: 50%;
	}
</style>
